<template>
  <!-- http://localhost:8000/#/inspectProject?inspectId=0836f366313a4c0cb407ff095e8465b9&studentId=3a43f25e4b634eddaa7e5b406d2f28a6 -->
  <view class="inspectProject" >
    <view @click="downLoad"
      style="position: absolute;right: 0%;top: 0.5rem;z-index: 1000000;width: 100%;text-align: center;font-size: 1rem;color: #000;">
      点击下载此报告</view>
    <view class="content" ref="htmlElement" id="htmlElement">
      <view class="icon iconfont icon-xuehua post-top-left"></view>
      <view class="icon iconfont icon-xuehua post-top-right"></view>
      <view class="icon iconfont icon-xuehua post-bottom-left"></view>
      <view class="icon iconfont icon-xuehua post-bottom-right"></view>
      <view class="content-box">
        <view class="title-box">
          <view class="title">大连市青少年体型体态筛查检测报告表</view>

        </view>
        <view class="flex info">
          <view class="info-inner flex" style="flex: 0 0 30%">
            <view class="info-inner-title flex">姓名</view>
            <view class="info-inner-des">{{ studentEntity.name }}</view>
          </view>
          <view class="info-inner flex" style="flex: 0 0 30%">
            <view class="info-inner-title flex">性别</view>
            <view class="info-inner-des">{{ studentEntity.sex }}</view>
          </view>
          <view class="info-inner flex" style="flex: 0 0 30%">
            <view class="info-inner-title flex">年龄</view>
            <view class="info-inner-des">{{ studentEntity.birthday }}</view>
          </view>
          <view class="info-inner flex" style="flex: 0 0 30%">
            <view class="info-inner-title flex">入学</view>
            <view class="info-inner-des">{{ studentEntity.year }}</view>
          </view>
          <view class="info-inner flex" style="flex: 0 0 64%">
            <view class="info-inner-title flex">班级</view>
            <view class="info-inner-des">{{ studentEntity.grade }}-{{ studentEntity.classs }}</view>
          </view>
          <!-- <view class="info-inner flex" style="flex: 0 0 45%">
            <view class="info-inner-title flex">身高</view>
            <view class="info-inner-des">{{ first.height.itemDetail }}</view>
          </view>
          <view class="info-inner flex" style="flex: 0 0 45%">
            <view class="info-inner-title flex">体重</view>
            <view class="info-inner-des">{{ first.weight.itemDetail }}</view>
          </view>
          <view class="info-inner flex" style="flex: 0 0 45%">
            <view class="info-inner-title flex">BMI</view>
            <view class="info-inner-des">{{ first.BMI.itemDetail }}</view>
          </view>
          <view class="info-inner flex" style="flex: 0 0 45%">
            <view class="info-inner-title flex">指数</view>
            <view class="info-inner-des" style="display: flex;justify-content: center;align-items: center;width: 100%">
              <view :class="className" v-if="first.BMI.itemDetail">
                <view :class="'icon iconfont icon-' + className" style="font-size: 1.3rem;margin-right: 0.3rem;"></view>
              </view>
              {{ computedZhiShu(first.BMI.itemDetail) }}
            </view>
          </view> -->
        </view>

        <!-- 检测项目 start -->
        <view class="title-box des-title">
          <view class="title title1">1. 检测项目</view>
        </view>
        <view style='padding: 10px 0;font-size: 14px; text-indent: 20px;'>您孩子的身高是：<text class="textInner">{{ first.height.itemDetail }}</text>，体重是：<text class="textInner">{{ first.weight.itemDetail }}</text>，BMI的指数是<text class="textInner">{{ first.BMI.itemDetail }}</text>，体重指数为<text class="textInner">{{ computedZhiShu(first.BMI.itemDetail) }}</text><text :class="'icon iconfont icon-' + className" style="font-size: 1.3rem;margin-right: 0.3rem;"></text>。</view>
        <view class="inspect-box inspect-box1 borderAll">
          <view class="head-box flex borderBottom">
            <view class="head-box-title1 flex ">检测项目</view>
            <view class="head-box-title2 flex borderLeft">是</view>
            <view class="head-box-title3 flex borderLeft">否</view>
            <view class="head-box-title4 flex borderLeft">程度</view>
          </view>
          <view class="head-box contents-box2 flex borderBottom">
            <view class="head-box-title1 flex">脊柱侧弯</view>
            <view class="head-box-title2 flex borderLeft">
              <view :class="'bot ' + (beiMianObj.xiongDuanJiZhuCeWan.itemDetail == '是' ? 'isBot' : '')"></view>
            </view>
            <view class="head-box-title3 flex borderLeft">
              <view :class="'bot ' + (beiMianObj.xiongDuanJiZhuCeWan.itemDetail == '否' ? 'isBot' : '')"></view>

            </view>
            <view class="head-box-title4 flex borderLeft">
              <view v-for="i in 3" :key='i'
                :class="'bot ' + ((i <= beiMianObj.xiongDuanJiZhuCeWan.levelBak) ? 'isBot' : '')">
              </view>
            </view>
          </view>
          <view class="head-box contents-box13 flex">
            <view class="head-box-title1 flex">足底力线</view>
            <view class="head-box-title2 flex borderLeft">
              <view :class="'bot ' + (beiMianObj.zuDiLiXian.itemDetail == '是' ? 'isBot' : '')"></view>
            </view>
            <view class="head-box-title3 flex borderLeft">
              <view :class="'bot ' + (beiMianObj.zuDiLiXian.itemDetail == '否' ? 'isBot' : '')"></view>

            </view>
            <view class="head-box-title4 flex borderLeft">
              <view v-for="i in 3" :key='i' :class="'bot ' + ((i <= beiMianObj.zuDiLiXian.levelBak) ? 'isBot' : '')">
              </view>
            </view>
          </view>
        </view>
        <!-- 检测项目 end -->

        <!-- 筛查结果 start -->
        <view class="title-box des-title">
          <view class="title title1 title2">2. 筛查结果</view>
        </view>
        <view class="inspect-box inspect-box1 inspect-box21 borderAll">
          <view class="head-box flex borderBottom">
            <view class="head-box-title1 head-box-title21 flex ">部位</view>
            <view class="head-box-title2 head-box-title22 flex borderLeft">侧面</view>
            <view class="head-box-title3 head-box-title23 flex borderLeft">正面</view>
            <view class="head-box-title4 head-box-title24 flex borderLeft">背面</view>
          </view>
          <view class="head-box contents-box11 flex borderBottom">
            <view class="head-box-title1 head-box-title21 flex whiteSpace">头颈部</view>
            <view class="head-box-title2 head-box-title22 flex borderLeft">
              <view :class="'botBak bot ' + (side.touQianYin.itemDetail == '是' ? 'isBot' : '')"></view>
              <view style='flex: 1;text-align: left;'>探颈</view>
            </view>
            <view class="head-box-title3 head-box-title23 flex borderLeft"></view>
            <view class="head-box-title4 head-box-title24 flex borderLeft"></view>
          </view>
          <view class="head-box contents-box21 flex borderBottom">
            <view class="head-box-title1 head-box-title21 flex whiteSpace">肩 部</view>
            <view class="head-box-title2 head-box-title22 flex borderLeft"
              style="flex-direction: column;justify-content: space-around;">
              <view class="flex" style="width: 100%;">
                <view :class="'botBak bot ' + (side.fuGuiBao.itemDetail == '是' ? 'isBot' : '')"></view>
                <view style='flex: 1;text-align: left;'>富贵包</view>
              </view>
              <view class="flex" style="width: 100%;">
                <view :class="'botBak bot ' + (side.yuanJianHanXiong.itemDetail == '是' ? 'isBot' : '')"></view>
                <view style='flex: 1;text-align: left;'>圆肩</view>
              </view>
            </view>
            <view class="head-box-title3 head-box-title23 flex borderLeft">
              <view :class="'botBak bot ' + (front.gaoDiJian.itemDetail == '是' ? 'isBot' : '')"></view>
              <view style='flex: 1;text-align: left;'>高低肩</view>
            </view>
            <view class="head-box-title4 head-box-title24 flex borderLeft"></view>
          </view>
          <view class="head-box contents-box3 flex borderBottom">
            <view class="head-box-title1 head-box-title21 flex whiteSpace">背 部</view>
            <view class="head-box-title2 head-box-title22 flex borderLeft">
              <view :class="'botBak bot ' + (side.yiZhuangJianJia.itemDetail == '是' ? 'isBot' : '')"></view>
              <view style='flex: 1;text-align: left;'>翼状肩胛</view>
            </view>
            <view class="head-box-title3 head-box-title23 flex borderLeft"></view>
            <view class="head-box-title4 head-box-title24 flex borderLeft">
              <!-- 脊柱侧弯。两个位置有一个侧弯就是 true -->
              <view
                :class="'botBak bot ' + (beiMianObj.xiongDuanJiZhuCeWan.itemDetail == '是'? 'isBot' : '')">
              </view>
              <view style='flex: 1;text-align: left;'>脊柱侧弯</view>
            </view>
          </view>
          <view class="head-box contents-box4 flex borderBottom">
            <view class="head-box-title1 head-box-title21 flex whiteSpace">骨 盆</view>
            <view class="head-box-title2 head-box-title22 flex borderLeft">
              <view :class="'botBak bot ' + (side.guPenQianYi.itemDetail == '是' ? 'isBot' : '')"></view>
              <view style='flex: 1;text-align: left;'>骨盆前移</view>
            </view>
            <view class="head-box-title3 head-box-title23 flex borderLeft">
              <view :class="'botBak bot ' + (side.guPenQianQing.itemDetail == '是' ? 'isBot' : '')"></view>
              <view style='flex: 1;text-align: left;'>骨盆前倾</view>
            </view>
            <view class="head-box-title4 head-box-title24 flex borderLeft"></view>
          </view>
          <view class="head-box contents-box5 flex borderBottom">
            <view class="head-box-title1 head-box-title21 flex whiteSpace">膝 部</view>
            <view class="head-box-title2 head-box-title22 flex borderLeft">
              <view :class="'botBak bot ' + (side.xiChaoShen.itemDetail == '是' ? 'isBot' : '')"></view>
              <view style='flex: 1;text-align: left;'>膝超深</view>
            </view>
            <view class="head-box-title3 head-box-title23 flex borderLeft"
              style="flex-direction: column;justify-content: space-around;">
              <view class="flex" style="width: 100%">
                <view :class="'botBak bot ' + (front.changDuanTui.itemDetail == '是' ? 'isBot' : '')"></view>
                <view style='flex: 1;text-align: left;'>长短腿</view>
              </view>
              <view class="flex" style="width: 100%">
                <view :class="'botBak bot ' + (front.xiWaiFan.itemDetail == '是' ? 'isBot' : '')"></view>
                <view style='flex: 1;text-align: left;'>膝外翻</view>
              </view>
            </view>
            <view class="head-box-title4 head-box-title24 flex borderLeft"
              style="flex-direction: column;justify-content: space-around;">
              <view class="flex" style="width: 100%">
                <view :class="'botBak bot ' + (front.neiBaZi.itemDetail == '是' ? 'isBot' : '')"></view>
                <view style='flex: 1;text-align: left;'>内八字</view>
              </view>
              <view class="flex" style="width: 100%">
                <view :class="'botBak bot ' + (front.waiBaZi.itemDetail == '是' ? 'isBot' : '')"></view>
                <view style='flex: 1;text-align: left;'>外八字</view>
              </view>
            </view>
          </view>
          <view class="head-box contents-box6 flex borderBottom">
            <view class="head-box-title1 head-box-title21 flex whiteSpace">踝 部</view>
            <view class="head-box-title2 head-box-title22 flex borderLeft"></view>
            <view class="head-box-title3 head-box-title23 flex borderLeft"></view>
            <view class="head-box-title4 head-box-title24 flex borderLeft"></view>
          </view>
          <view class="head-box contents-box7 flex borderBottom">
            <view class="head-box-title1 head-box-title21 flex whiteSpace">足 部</view>
            <view class="head-box-title2 head-box-title22 flex borderLeft"></view>
            <view class="head-box-title3 head-box-title23 flex borderLeft"
              style="flex-direction: column;justify-content: space-around;">
              <view class="flex" style="width: 100%">
                <view :class="'botBak bot ' + (beiMianObj.genGuWaiFan.level !== '左正常、右正常' ? 'isBot' : '')"></view>
                <view style='flex: 1;text-align: left;'>跟骨外翻</view>
              </view>
              <view class="flex" style="width: 100%">
                <view v-if="beiMianObj.genGuWaiFan.level !== null && beiMianObj.genGuWaiFan.level !== ''">({{
                  beiMianObj.genGuWaiFan.level }})</view>
                <view v-else>健康</view>
              </view>
            </view>
            <view class="head-box-title4 head-box-title24 flex borderLeft"
              style="flex-direction: column;justify-content: space-around;">
              <view class="flex" style="width: 100%">
                <view :class="'botBak bot ' + (beiMianObj.bianPingZu.level !== '左正常、右正常' ? 'isBot' : '')"></view>
                <view style='flex: 1;text-align: left;'>扁平足</view>
              </view>
              <view class="flex" style="width: 100%">
                <view v-if="beiMianObj.bianPingZu.level !== null && beiMianObj.bianPingZu.level !== ''">({{
                  beiMianObj.bianPingZu.level }})</view>
                <view v-else>健康</view>

              </view>
            </view>
          </view>
        </view>
        <!-- 筛查结果 end -->

        <!-- 筛查报告 start -->
        <view style="width: 100%;position: relative;" v-if="diagnoseEntity.reportName">
          <view
            style="position: absolute;right: 1rem;top: 1.3rem;color: #004D40;text-decoration: underline;text-underline-offset: 4px;"
            @click="reportHandle">足底压力图谱</view>
          <!-- 查看机器报告 -->
        </view>
        <view class="title-box des-title">
          <view class="title title1 title3">
            3. 筛查报告
          </view>
        </view>
        <view class="inspect-box31">
          <inspectProjectAdvice :des='diagnoseEntity.diagnose || "暂无异常"'></inspectProjectAdvice>
        </view>
        <!-- 筛查报告 end -->

        <view class='inspect-box31 remark-box'>
          <view class='remark-title'>备注：</view>
          <view class='remark-des'>
            <view class="remark-inner flex">
              <view class="tip">1、</view>
              <view class="tip-inner">此表为大连市儿童青少年体型体态筛查项目初级筛查检测报告;</view>
            </view>
            <view class="remark-inner flex">
              <view class="tip">2、</view>
              <view class="tip-inner">本报告仅用于本次大连市体型体态筛查公益项目，不做任何其他途径使用;</view>
            </view>
            <view class="remark-inner flex">
              <view class="tip">3、</view>
              <view class="tip-inner">表格内学生信息保密，学校内部一对一反馈，禁止外传;</view>
            </view>
            <view class="remark-inner flex">
              <view class="tip">4、</view>
              <view class="tip-inner">本次筛查报告为大连医科大学附属第二医院(运动医学中心)出具;</view>
            </view>
            <view class="remark-inner flex">
              <view class="tip">5、</view>
              <view class="tip-inner">如有治疗、矫正需求请前往大医二院青少年体型体态健康管理中心:177-0987-6857;</view>
            </view>
            <view class="remark-inner flex">
              <view class="tip"></view>
              <view class="tip-inner">总机及门诊工作时间:周一至周日 08:00-17:00</view>
            </view>
            <view class="remark-inner flex">
              <view class="tip"></view>
              <view class="tip-inner">大医二院总机:0411-84671291 转 2320(运动医学中心 门诊A座3楼)</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <image style="height:300rpx;width: 100%" :src='imageSrc'></image> -->
  </view>
</template>
<script>
import inspectProjectAdvice from './inspectProjectAdvice.vue'
import mRequest from "@/api/index"
import html2canvas from 'html2canvas'
export default {
  components: {
    inspectProjectAdvice
  },
  data () {
    return {
      inspectId: '',
      studentId: '',
      diagnoseEntity: {},
      studentEntity: {},
      loadingEnd: false,
      first: {},
      front: {},
      side: {},
      beiMianObj: {},
      zuDiLiXianLevel: '',
      bianPingZuLevel: '',
      genGuWaiFanLevel: '',
      xiongDuanJiZhuCeWanLevel: '',
      className: '',
      imageSrc: ''
    }
  },
  methods: {
    async downLoad () {
      const qwer = document.getElementById('htmlElement') // 需要转换的HTML元素的引用
      // console.log(qwer)
      try {
        const canvas = await html2canvas(qwer)
        const imgUrl = canvas.toDataURL('image/png') // 输出图片的Base64 URL
        this.imageSrc = imgUrl
        uni.downloadFile({
          url: imgUrl,
          success: downloadResult => {
            console.log(downloadResult)
            if (downloadResult.statusCode === 200) {
              var oA = document.createElement("a");
								oA.download = `${this.studentEntity.name}的体检报告`; // 设置下载的文件名，默认是'下载'
								oA.href = downloadResult.tempFilePath; //临时路径再保存到本地
								document.body.appendChild(oA);
								oA.click();
								oA.remove(); // 下载之后把创建的元素删除
                // uni.showToast({ title: '已保存到系统相册' });

              // uni.saveImageToPhotosAlbum({
              //   filePath: downloadResult.tempFilePath,
              //   success: (path) => {
              //     uni.showToast({ title: '已保存到系统相册' });
              //     console.log('保存图片的绝对路径为：', path);
              //   },
              //   fail: (err) => {
              //     console.log('图片保存失败', err);
              //   }
              // });
            } else {
              uni.showToast({
                title: '图片下载失败',
                icon: 'none'
              })
            }
          },
          fail: () => {
            uni.showToast({
              title: '图片下载失败',
              icon: 'none'
            })
          }
        })
        console.log(imgUrl)
        // 接下来你可以使用这个imgUrl，例如显示在<image>组件中或者下载等
      } catch (error) {
        console.error('转换出错:', error)
      }
      // htmlToCavas(document.getElementById('elementId'), {
      //     useCORS: true,
      //     logging: true, 
      //     backgroundColor: '#982121', 
      //     scale: 2, 
      //     dpi: 750}).then(res=> {
      //       this.imageSrc = res.src
      // }).catch(err=> {
      //     console.log(err)
      // })
    },
    reportHandle () {
      window.open(this.diagnoseEntity.reportInternetUrl, '_blank')
    },
    computedZhiShu (val) {
      console.log(val)
      if (val < 18.5) {
        this.className = 'qing'
        return '体重过轻'
      } else if (val >= 18.5 && val < 24) {
        this.className = 'zhengchang'
        return '体重正常'
      } else if (val >= 24 && val < 28) {
        this.className = 'chaozhong'
        return '超重'
      } else if (val >= 28) {
        this.className = 'feipang'
        return '肥胖'
      }
    },
    getInfo () {
      this.loadingEnd = false
      let params = {
        inspectId: this.inspectId,
        studentId: this.studentId,
        // 是否检查了第四项，但是没有写诊断
        isEnd: 1
      }
      mRequest.getReport(params).then((data) => {
        if (data && data.code === 0) {
          console.log(data.inspectReport.diagnoseEntity)
          this.studentEntity = data.inspectReport.studentEntity
          this.diagnoseEntity = data.inspectReport.diagnoseEntity
          this.loadingEnd = true
          data.inspectReport.inspectDetails.map(v => {
            if (v.item === '身高') {
              console.log(v)
              this.first.height = v
            } else if (v.item === '体重') {
              this.first.weight = v
              console.log(this.first.weight)
            } else if (v.item === 'BMI') {
              this.first.BMI = v
            } else if (v.side === '侧面' && v.item === '头前引（探颈v）') {
              this.side.touQianYin = v
            } else if (v.side === '侧面' && v.item === '富贵包') {
              this.side.fuGuiBao = v
            } else if (v.side === '侧面' && v.item === '弓背') {
              this.side.gongBei = v
            } else if (v.side === '侧面' && v.item === '冀状肩胛') {
              this.side.yiZhuangJianJia = v
            } else if (v.side === '侧面' && v.item === '骨盆前倾') {
              this.side.guPenQianQing = v
            } else if (v.side === '侧面' && v.item === '骨盆前移') {
              this.side.guPenQianYi = v
            } else if (v.side === '侧面' && v.item === '膝超深') {
              this.side.xiChaoShen = v
            } else if (v.side === '侧面' && v.item === '圆肩(含胸)') {
              this.side.yuanJianHanXiong = v
            } else if (v.side === '正面' && v.item === '高低肩') {
              this.front.gaoDiJian = v
            } else if (v.side === '正面' && v.item === '长短腿') {
              this.front.changDuanTui = v
            } else if (v.side === '正面' && v.item === '膝外翻') {
              this.front.xiWaiFan = v
            } else if (v.side === '正面' && v.item === '内八字') {
              this.front.neiBaZi = v
            } else if (v.side === '正面' && v.item === '外八字') {
              this.front.waiBaZi = v
            } else if (v.side === '背面' && v.item === '脊柱侧弯') {
              this.beiMianObj.xiongDuanJiZhuCeWan = v
              let levelBak = this.beiMianObj.xiongDuanJiZhuCeWan.level
              this.beiMianObj.xiongDuanJiZhuCeWan.levelBak = levelBak === '轻度' ? 1 : levelBak === '中度' ? 2 : levelBak === '重度' ? 3 : ''
            }
          })
          // 扁平足
          let bianPingZu = data.inspectReport.inspectDetails.filter(d => {
            return d.item === '扁平足'
          })
          if (bianPingZu.length > 0) {
            this.beiMianObj.bianPingZu = bianPingZu[0]
            this.bianPingZuLevel = bianPingZu[0].level
          } else {
            this.beiMianObj.bianPingZu = {
              project: '第三项',
              item: '扁平足',
              itemDetail: '否',
              bodyPart: '足部',
              level: '',
              side: '背面'
            }
          }
          // 跟骨外翻
          let genGuWaiFan = data.inspectReport.inspectDetails.filter(d => {
            return d.item === '跟骨外翻'
          })
          if (genGuWaiFan.length > 0) {
            this.beiMianObj.genGuWaiFan = genGuWaiFan[0]
            this.genGuWaiFanLevel = genGuWaiFan[0].level
          } else {
            this.beiMianObj.genGuWaiFan = {
              project: '第三项',
              item: '跟骨外翻',
              itemDetail: '否',
              bodyPart: '足部',
              level: '',
              side: '背面'
            }
          }
          // 足底力线
          let arrFoot = data.inspectReport.inspectDetails.filter(d => {
            return d.item === '足底力线'
          })
          if (arrFoot.length > 0) {
            this.beiMianObj.zuDiLiXian = arrFoot[0]
            let levelBak = this.beiMianObj.zuDiLiXian.level
            this.beiMianObj.zuDiLiXian.levelBak = levelBak === '轻度' ? 1 : levelBak === '中度' ? 2 : levelBak === '重度' ? 3 : ''
          } else {
            this.beiMianObj.zuDiLiXian = {
              project: '第三项',
              item: '足底力线',
              itemDetail: '否',
              bodyPart: '足部',
              level: '',
              side: '背面'
            }
          }
        }
      })
    }
  },
  onLoad (options) {
    this.inspectId = options.inspectId || ''
    this.studentId = options.studentId || ''
    this.getInfo()
  }
}
</script>
<style lang='scss' scoped>
.inspectProject {
  width: 100%;
  background: #f5f5f5;
  overflow: auto;

  .bot {
    height: 0.9rem;
    width: 0.9rem;
    background: #f5f5f5;
    border-radius: 100%;
    border: 0.16rem solid #2b6e5a;
    margin: 0 0.1rem;
  }

  .botBak {
    margin: 0 0.5rem;

  }

  .isBot {
    background: #333;
  }

  .borderBottom {
    border-bottom: 0.07rem solid #333;
  }

  .borderLeft {
    border-left: 0.07rem solid #333;
  }

  .borderAll {
    border: 0.07rem solid #333;
  }

  .whiteSpace {
    white-space: pre;
    font-weight: 600;
  }

  // 指数 start
  .qing {
    color: #263238;
    font-weight: 600;
  }

  .zhengchang {
    color: #004D40;
    font-weight: 600;
  }

  .chaozhong {
    color: #BF360C;
    font-weight: 600;
  }

  .feipang {
    color: #B71C1C;
    font-weight: 600;
  }

  // 指数 end

  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .content {
    position: relative;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    background: linear-gradient(to bottom, #c2dcc1 20%, #fff 60%, #fff 90%, #c2dcc1 100%);
    padding: 1rem;
    min-height: 100vh;
    box-sizing: border-box;

    .post-top-left {
      position: absolute;
      left: 1rem;
      top: 1rem;
      font-size: 0.7rem;
      color: #2b6e5a;
    }

    .post-top-right {
      position: absolute;
      right: 1rem;
      top: 1rem;
      font-size: 0.7rem;
      color: #2b6e5a;
    }

    .post-bottom-left {
      position: absolute;
      left: 1rem;
      bottom: 1rem;
      font-size: 0.7rem;
      color: #2b6e5a;
    }

    .post-bottom-right {
      position: absolute;
      right: 1rem;
      bottom: 1rem;
      font-size: 0.7rem;
      color: #2b6e5a;
    }

    .content-box {
      margin-top: 1rem;

      // width: 22.5rem;
      // margin: 0 auto;
      // background: pink;
      .title-box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem;

        .title {
          font-size: 1rem;
          text-align: center;
          height: 2.4rem;
          line-height: 2.4rem;
          background: #2b6e5a;
          width: auto;
          margin: 0 auto;
          display: inline-block;
          padding: 0 0.9rem;
          border-radius: 0.6rem;
          position: relative;
          z-index: 1;
        }

        .title:before {
          content: '';
          height: calc(100% - 0.3rem);
          width: calc(100% - 0.3rem);
          position: absolute;
          left: 0.15rem;
          top: 0.15rem;
          background: #f5f5f5;
          border-radius: 0.55rem;
          z-index: 0;
        }

        .title:after {
          content: '大连市青少年体型体态筛查检测报告表';
          height: calc(100% - 0.4rem);
          line-height: 2rem;
          width: calc(100% - 0.4rem);
          position: absolute;
          background: #2b6e5a;
          border-radius: 0.53rem;
          left: 0.2rem;
          top: 0.2rem;
          z-index: 0;
          font-size: 1rem;
          color: #fff;
        }

        .title1 {
          font-size: 0.6rem;
          height: 2rem;
          line-height: 1.8rem;
          padding: 0 1.9rem;
          border-radius: 1rem;
          margin-top: 1rem;
        }

        .title1:after {
          content: '1. 检测项目';
          font-size: 0.8rem;
          border-radius: 1.53rem;
          line-height: 1.6rem;
          top: 0.2rem;
        }

        .title1:before {
          border-radius: 1.55rem;
        }

        .title2:after {
          content: '2. 筛查结果';
        }

        .title3:after {
          content: '3. 筛查报告';

        }
      }

      .des-title {
        display: contents;
      }

      .info {
        justify-content: space-between;
        font-size: 0.9rem;
        color: #333;
        flex-wrap: wrap;
        margin: 0 0.5rem;

        .info-inner {
          flex: 0 0 49%;
          height: 1.6rem;
          line-height: 1.6rem;
          margin-top: 1rem;
          padding-right: 0.4rem;

          .info-inner-title {
            width: 2.8rem;
            background: #9cc7ae;
            border-radius: 0.4rem;
            font-weight: 500;
            letter-spacing: 0.3rem;
            margin-right: 0.2rem;
          }

          .info-inner-des {
            flex: 1;
            border-bottom: 0.15rem dotted #9cc7ae;
            border-bottom-style: dashed;
            text-align: center;
            font-size: 0.8rem;
          }
        }
      }
    }

    .inspect-box {
      margin: 0.4rem 0.1rem 0 0.1rem;
      border-radius: 0.4rem;
      overflow: hidden;

      // background: linear-gradient(to bottom, #72b598 1%, #fff 100%, #fff 100%);
      .head-box {
        height: 2.6rem;
        width: 100%;
        background: #72b598;
        font-size: 0.9rem;
        font-weight: 600;
        color: #333;

        .head-box-title1 {
          width: 6rem;
          height: 100%;
        }

        .head-box-title4 {
          width: 6rem;
          height: 100%;
        }

        .head-box-title2 {
          flex: 1;
          height: 100%;
        }

        .head-box-title3 {
          flex: 1;
          height: 100%;
        }

        .head-box-title21 {
          width: 4rem;
          height: 100%;
        }

        .head-box-title22,
        .head-box-title23,
        .head-box-title24 {
          flex: 1;
          height: 100%;
          font-size: 0.61rem;
        }
      }

      .contents-box1 {
        background: #9cc7af;
        height: 2.2rem;
        font-weight: 400;
        font-size: 0.8rem;
      }

      .contents-box2 {
        background: #bfdabf;
        height: 2.2rem;
        font-weight: 400;
        font-size: 0.8rem;
      }

      .contents-box13 {
        background: #f5f5f5;
        height: 2.2rem;
        font-weight: 400;
        font-size: 0.8rem;
      }

      .contents-box11 {
        background: #9cc7af;
        height: 2.2rem;
        font-weight: 400;
        font-size: 0.8rem;
      }

      .contents-box21 {
        background: #bfdabf;
        height: 2.8rem;
        font-weight: 400;
        font-size: 0.8rem;
      }

      .contents-box3 {
        background: #d6e4cc;
        height: 2.2rem;
        font-weight: 400;
        font-size: 0.8rem;
      }

      .contents-box4 {
        background: #e2ebd1;
        height: 2.2rem;
        font-weight: 400;
        font-size: 0.8rem;
      }

      .contents-box5 {
        background: #f1f3da;
        height: 2.8rem;
        font-weight: 400;
        font-size: 0.8rem;
      }

      .contents-box6 {
        background: #f1f3da8c;
        height: 2.2rem;
        font-weight: 400;
        font-size: 0.8rem;
      }

      .contents-box7 {
        background: #fff;
        height: 2.8rem;
        font-weight: 400;
        font-size: 0.8rem;
      }
    }

    .inspect-box31 {
      padding: 0.5rem 0 !important;
    }

    .remark-box {
      display: flex;
      color: #999;
      font-size: 0.6rem;
      line-height: 1rem;

      .remark-title {
        width: 2.7rem;
        text-align: right;
      }

      .remark-des {
        flex: 1;

        .remark-inner {
          align-items: flex-start;

          // line-height: 0rem;
          .tip {
            width: 1rem;
            padding: 0;
            margin: 0;
          }

          .tip-inner {
            flex: 1;
            padding: 0;
            margin: 0;
          }
        }
      }
    }
  }
}
.textInner{
  text-decoration: underline;
  padding: 0 2px;
  font-weight: 500;
  font-size: 16px;
}
</style>